<template>
  <header class="header">
    <h1 class="left" @click="toMain('main')">
      <i class="iconfont icon-aislogo"></i><span>基于vue的前端基础框架</span>
      <span
        @click="collapsedSider"
        class="iconfont icon-ego-menu"
        :style="{margin: '0px 5px',fontSize:'22px'}"
      ></span>
    </h1>
    <section class="item">
      <Badge :count="10" class="col">
          <Icon type="ios-notifications-outline" size="26"></Icon>
      </Badge>
      <Dropdown class="col">
        <h1 href="javascript:void(0)">
          皮肤设置
          <Icon type="ios-arrow-down"></Icon>
        </h1>
        <DropdownMenu slot="list">
          <DropdownItem>蓝色</DropdownItem>
          <DropdownItem>红色</DropdownItem>
          <DropdownItem>绿色</DropdownItem>
          <DropdownItem>灰色</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <div class="userInfo">
        <span class="col">{{$store.state.user.name}}</span>
        <Dropdown class="col" placement="bottom-end" @on-click="dropdown">
          <Avatar :src="$store.state.user.avatorImgPath"/>
          <DropdownMenu slot="list">
            <DropdownItem name="userSet">用户设置</DropdownItem>
            <DropdownItem name="userPsd">设置密码</DropdownItem>
            <DropdownItem name="logout">退出登录</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </section>
  </header>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: {
    collapsed: Boolean
  },
  methods: {
    ...mapActions([
      'logOut'
    ]),
    collapsedSider () {
      this.$emit('toggleHandle', !this.collapsed)
    },
    dropdown (name) {
      if(name === 'logout') {
        this.logOut().then(res => {
          if(res.code === 1)
          this.$Message.success('退出成功')
          this.$router.replace({ name: 'login' })
        })
      }
    },
    toMain(href) {
      this.$router.push({name:href})
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>


